<template>
    <div>
        <el-row class="search-row">
            <el-button @click="addDialogShow = true" size="mini" type="primary">新增菜单</el-button>
        </el-row>

        <el-dialog title="添加菜单" :visible.sync="addDialogShow" width="600px" :close-on-click-modal="false">
            <el-form ref="addForm" :model="form" label-width="80px" :rules="rules" label-position="right">
                <el-form-item label="上级菜单">
                    <el-cascader :options="menuOptions" v-model="form.parentMenu" :props="menuProps" placeholder="请选择上级菜单" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-radio-group v-model="form.menuType" @change="menuTypeChange">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                        <!-- <el-radio :label="2">按钮</el-radio> -->
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单图标" v-if="isShow.iconIsShow">
                    <IconSelect ref="IconSelect" @changeIconClassName="changeIconClassName"></IconSelect>
                </el-form-item>
                <el-form-item label="菜单名称" style="width:49%;display:inline-block;" prop="menuName">
                    <el-input v-model="form.menuName" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" style="width:50%;display:inline-block;" prop="menuOrder">
                    <el-input-number v-model="form.menuOrder" placeholder="请输入排序" :min="0" controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="显示状态" v-if="isShow.stateIsShow">
                    <el-radio-group v-model="form.menuState">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="组件地址" style="width:49%;display:inline-block;" prop="menuComponentPath" v-if="isShow.compentmentsIsShow">
                    <el-input v-model="form.menuComponentPath" placeholder="请输入组件地址"></el-input>
                </el-form-item>
                <el-form-item label="路由地址" style="width:50%;display:inline-block;" prop="menuRouteAddress" v-if="isShow.pathIsShow">
                    <el-input v-model="form.menuRouteAddress" placeholder="请输入路由地址"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="addSubmit">确定</el-button>
                <el-button @click="addCancel">取消</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import IconSelect from "@/components/IconSelect/index";
import { addMenu,getMenu } from "@/api/menu";
export default {
    components: {
        IconSelect,
    },
    data() {
        return {
            addDialogShow: false,
            // 新增时数据
            form: {
                menuName: "",
                menuType: 0,
                menuOrder: null,
                menuRouteAddress: "",
                menuComponentPath: "",
                menuState: 1,
                menuIcon: "",
                menuIconName: "",
                parentMenu: [-1],
            },
            rules: {
                menuName: [
                    {
                        required: true,
                        message: "请输入菜单名称",
                        trigger: "blur",
                    },
                ],
                menuOrder: [
                    {
                        required: true,
                        message: "请输入菜单排序",
                        trigger: "blur",
                    },
                ],
                menuComponentPath: [
                    {
                        required: true,
                        message: "请输入组件地址",
                        trigger: "blur",
                    },
                ],
                menuRouteAddress: [
                    {
                        required: true,
                        message: "请输入路由地址",
                        trigger: "blur",
                    },
                ],
            },
            // 图标
            className: "",
            name: "",
            // 上级菜单目录
            menuOptions: [
                {
                    menuName: "主类目",
                    menuId: -1,
                },
            ],
            baseOptions: [
                {
                    menuName: "主类目",
                    menuId: -1,
                },
            ],
            menuProps: {
                checkStrictly: true,
                value: "menuId",
                label: "menuName",
            },
            isShow: {
                // 菜单图标
                iconIsShow: false,
                // 组件地址
                compentmentsIsShow: false,
                // 显示状态
                stateIsShow: false,
                // 路由地址
                pathIsShow: false,
            },
        };
    },
    methods: {
        // 监听icon的更改
        changeIconClassName(value) {
            let [menuIcon, menuIconName] = value;
            this.form.menuIcon = menuIcon;
            this.form.menuIconName = menuIconName;
        },
        // 查询菜单
        selectMenus() {
            getMenu().then(e => {
                if(e.data.code == 0) {

                }else {

                }
            })
        },
        addSubmit() {
            this.$refs["addForm"].validate((valid) => {
                if (valid) {
                    console.log("submit");
                    console.log(this.form);
                    if (!this.form.menuIcon) {
                        this.$message.error("请选择菜单图标");
                        return;
                    } else if (
                        !this.form.parentMenu ||
                        this.form.parentMenu.length == 0
                    ) {
                        this.$message.error("请选择上级菜单");
                        return;
                    } else {
                        addMenu(this.form).then((e) => {
                            if (e.data.code == 0) {
                                this.$message.success(e.data.message);
                                this.selectMenus();
                            } else {
                                this.$message.error(e.data.message);
                            }
                            this.addCancel();
                        });
                    }
                }
            });
        },
        // 菜单类型改变
        menuTypeChange(label) {
            if (label == 0) {
                // 目录
                this.isShow = {
                    iconIsShow: true,
                    compentmentsIsShow: true,
                    stateIsShow: true,
                    pathIsShow: false,
                };
                this.form.parentMenu = [-1];
            } else if (label == 1) {
                // 菜单
                this.isShow = {
                    iconIsShow: true,
                    compentmentsIsShow: true,
                    stateIsShow: true,
                    pathIsShow: true,
                };
                this.form.parentMenu = "";
            } else {
                // 按钮
                this.isShow = {
                    iconIsShow: false,
                    compentmentsIsShow: false,
                    stateIsShow: false,
                    pathIsShow: false,
                };
                this.form.parentMenu = "";
            }
        },
        // 取消 - 关闭dialog
        addCancel() {
            this.$refs["addForm"].resetFields();
            this.$refs.IconSelect.iconReset();
            this.addDialogShow = false;
        },
    },
    mounted() {
        this.menuTypeChange(0);
        this.selectMenus()
    },
};
</script>

<style scoped>
.el-cascader {
    width: 100%;
}
* >>> .el-form-item__label {
    font-weight: bold;
}
* >>> .el-radio__input.is-checked .el-radio__inner {
    border-color: #005db6;
    background: #005db6;
}
.el-button--primary {
    color: #fff;
    background-color: #005db6;
    border-color: #005db6;
}

.search-row {
    padding: 10px;
}
</style>